body .el-drawer {
  background-color: var(--color-grey-1);
  --el-drawer-padding-primary: 0px;

  .el-drawer__header {
    padding: 16px 12px;
    margin-bottom: 8px;
    background-color: var(--color-white);
  }

  .el-drawer__body {
    background-color: var(--color-white);
  }

  .step-num {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--color-grey-6);
    text-align: center;
    line-height: 22px;
  }

  .step-item {
    display: flex;
    align-items: center;
    color: var(--color-grey-4);

    &.is-done {
      color: var(--color-grey-9);

      .step-num {
        border-color: var(--color-green-6);
      }

      &::after {
        height: 2px !important;
        background-color: var(--color-green-6) !important;
      }
    }

    &.is-active {
      color: var(--color-green-6);
      font-weight: 600;
      .step-num {
        background-color: var(--color-green-6);
        border-color: var(--color-green-6);
        color: var(--color-white);
      }
    }

    &:not(:last-child) {
      &::after {
        content: '';
        display: inline-block;
        width: 148px;
        height: 1px;
        margin: 0 16px;
        background-color: var(--color-grey-3);
      }
    }
  }
}
